{% extends 'myhome/public/base.html' %}

{% block title %}
    <title>收货地址管理</title>
{% endblock %}

{% block css %}
    <link rel="stylesheet" type="text/css" href="/static/myhome/css/order.css">
    <link rel="stylesheet" type="text/css" href="/static/myhome/css/order-app.css">

{% endblock %}


{% block con %}
<div class="mainbody order">
    <div class="container">
        <!-- 面包屑导航 -->
        <div class="crumbs col-xs-12 col-sm-12">
            <ol class="breadcrumb">
                <li class="hidden-xs hidden-sm"><a href="index.html">首页</a></li>
                <li class="hidden-xs hidden-sm"><a href="member.html">我的商城</a></li>
                <li class="active"><a href="{% url 'myhome_myaddress' %}" style="color:red">收货地址管理</a></li>
            </ol>
        </div><!-- 面包屑导航 E-->
        
        <div class="main clearfix">
            <!-- 左侧导航 -->
            <div class="left-nav f-fl col-md-4 hidden-xs hidden-sm">
                <div class="nav-main">
                    <a href="javascript:;" class="type-title"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>订单中心</a>
                    <a href="{% url 'myhome_myorder' %}" class="ml ">我的订单</a>
                    <a href="#" class="ml ">我的回购单</a>
                    <a href="#" class="ml ">我的意外保</a>
                    <a href="javascript:;" class="type-title"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>个人中心</a>
                    <a href="{% url 'myhome_myselfset' %}" class="ml ">我的信息</a>
                    <a href="{% url 'myhome_myaddress' %}" class="ml active">地址管理</a>
                    <a href="#" class="ml ">我的收藏</a>
                    <a href="#" class="ml ">消息提醒</a>
                    <a href="#" class="ml ">建议反馈</a>
                </div>
            </div><!-- 左侧导航 E-->
            <!-- 右侧内容展示 -->

            <div class="right-content f-fr col-md-8 col-xs-12 col-sm-12">


                <br>

                        <div class="row" style="background: #fff;">
            <div class="col-md-10">
               <!-- <h3 style="padding-top: 10px;">收货地址</h3> -->

               <!-- 模态狂 -->
               <button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal">
                    <span style="color: blue;font-size:18px;"><u>新增地址</u></span>
               </button>

               <!-- 新增地址的模态框 -->
               <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                 <div class="modal-dialog" role="document">
                   <div class="modal-content">
                     <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                       <h4 class="modal-title" id="myModalLabel">新增地址</h4>
                     </div>


                    <form>
                         <div class="modal-body">
                             <div class="form-group">
                                   <label >收货人</label>
                                   <input type="text" name="addressname" class="form-control">
                             </div>
                             <div class="form-group">
                                   <label >收货地址</label>
                                   <input type="text" name="address" class="form-control">
                             </div>

                             <div class="form-group">
                                   <label >收货电话</label>
                                   <input type="text" name="addressphone" class="form-control">
                             </div>
                          
                             <div class="checkbox">
                                   <label>
                                        <input type="checkbox" name="status" value="1"> 是否默认
                                   </label>
                             </div>

                         </div>
                         <div class="modal-footer">
                               <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                               <button type="button" class="btn btn-primary" id="CreateAddress">添加</button>
                         </div>
                    </form>


                   </div>
                 </div>
               </div>

            </div>
            <br>
            <br>
            <br>
            {% for v in adds %}
                {% if v.status %}
                <div class="col-md-3" >
                    <address aid="{{ v.id }}" isstatus='true' style="border:2px dashed #f39;">
                      <strong>{{ v.addressname }}</strong><br>
                     {{ v.address }}<br>
                      <abbr title="Phone">P:</abbr>{{ v.addressphone }}
                      <span style="color: red;">默认地址</span>
                    </address>
                </div>
                {% else %}
                <div class="col-md-3" >
                    <address  aid="{{ v.id }}" style="border:2px solid #ccc;">
                      <strong>{{ v.addressname }}</strong><br>
                     {{ v.address }}<br>
                      <abbr title="Phone">P:</abbr>{{ v.addressphone }}
                    </address>
                </div>
                {% endif %}
            {% endfor %}
        </div>

                <div class="bs-example" data-example-id="contextual-table">
                
                <table class="table">
                <thead>
                    <tr style="background-color: cadetblue;font-size: 16px;">
                        <th>#</th>
                        <th>收货地址</th>
                        <th>收货人</th>
                        <th>收货电话</th>
                        <th>是否默认</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                        {% for v in ob %}                    
                        <tr class="active" style="font-size: 16px;">
                            <td class="am-text-middle addressid">{{ v.id }}</td>
                            <td class="am-text-middle">{{ v.address }}</td>
                            <td class="am-text-middle">{{ v.addressname }}</td>
                            <td class="am-text-middle">{{ v.addressphone }}</td>
                            <td class="am-text-middle">{{ v.status }}</td>
                            <td class="am-text-middle">
                                <div class="tpl-table-black-operation">
                                       <!-- 模态狂 -->
                                    <button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal1">
                                        <span style="font-size:17px;"><i class="am-icon-pencil">编辑</i></span>
                                    </button>
                                    <a href="#" class="tpl-table-black-operation-del">
                                        <i class="am-icon-trash"></i> 删除
                                    </a>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}  
                    </tbody>
                </tbody>
        </table>
    </div>


                
               <!-- 新增地址的模态框 -->
               <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                 <div class="modal-dialog" role="document">
                   <div class="modal-content">
                     <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                       <h4 class="modal-title" id="myModalLabel">编辑</h4>
                     </div>


                    <form action="{% url 'myhome_addressupdate' %}" method="post" class="formedit">
                     {% csrf_token %}
                     <div class="modal-body">
                         <input type="hidden" name="id" class="addressid" >
                         <div class="form-group">
                           <label >收货人</label>
                           <input type="text" name="addressname" class="form-control addressname ">
                         </div>
                         <div class="form-group">
                           <label >收货地址</label>
                           <input type="text" name="address" class="form-control address">
                         </div>

                         <div class="form-group">
                           <label >收货电话</label>
                           <input type="text" name="addressphone" class="form-control addressphone">
                         </div>
                      
                         <div class="checkbox">
                           <label>
                             <input class='status' type="checkbox" name="status" value="1"> 是否默认
                           </label>
                         </div>

                     </div>
                     <div class="modal-footer">
                       <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                       <button type="submit" class="btn btn-primary" id="UpdateAddress">添加</button>
                     </div>
                    </form>




            </div>
        </div>
    </div>  
</div>

{% endblock %}

{% block js %}

<script type="text/javascript" src="/static/myadmin/js/uploadPreview.js"></script>

<script type="text/javascript">
    
    // 地址添加
    $('#CreateAddress').click(function(){
        var data = {}
        // 获取表单中的数据
        data.addressname = $(this).parents('form').find('input[name=addressname]').val()
        data.address = $(this).parents('form').find('input[name=address]').val()
        data.addressphone = $(this).parents('form').find('input[name=addressphone]').val()
        data.status = 0
        if( $(this).parents('form').find('input[name=status]').prop('checked')){
            data.status = 1
        }
        // 发送ajax 添加地址
        $.get('{% url "myhome_addressinsert" %}',data,function(data){
            if(data.error == 0){
                // location.href=location.href
                location.href="{% url 'myhome_myaddress' %}"
            }
            alert(data.msg)
        })
    })

    // 地址删除
    $('.tpl-table-black-operation-del').click(function(){
        
        // 获取当前的id号
        var id = $(this).parents('tr').find('.addressid').text()
        var d = $(this)
        
        // 发送ajax请求,传递id
        $.get('{% url "myhome_addressdelete" %}',{'id':id},function(data){
            if(data.error == 0){
                // 删除成功,删除当前的元素
                // $(this).parents('tr').remove() #XXXXXXX
                // 在此处 $(this) 代表的是 ajax对象 XMLHttpRequest对象
                d.parents('tr').remove()
            }
            alert(data.msg)
        },'json')
    })

  // 地址修改
    $('.tpl-table-black-operation').click(function(){
        
        // 获取当前的id号
        var id = $(this).parents('tr').find('.addressid').text()
    
        // 发送ajax请求,传递id
        $.get("{% url 'myhome_addressedit' %}",{'id':id},function(data){
            
           $('.formedit .addressname').val(data.addressname)
           $('.formedit .address').val(data.address)
           $('.formedit .addressphone').val(data.addressphone)
           $('.formedit .addressid').val(data.id)
           if(data.status){
            $('.formedit .statu').prop('checked',true)
           }
           else{
            $('.formedit .statu').prop('checked',false)
           }
           
        })
    })

</script>    
{% endblock %}









